<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>客户满意度调查</title>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .filters { display: flex; gap: 10px; background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter { min-width: 150px; }
        .filter select { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; }
        .search-bar { flex: 1; max-width: 500px; }
        .search-bar input { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; }
        .surveys-list { display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
        .survey { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .survey-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
        .survey-title { font-weight: bold; font-size: 16px; }
        .status-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; }
        .status-active { background-color: #e8f5e9; color: #2e7d32; }
        .status-draft { background-color: #f5f5f5; color: #555555; }
        .status-completed { background-color: #e3f2fd; color: #0d47a1; }
        .survey-meta { margin: 10px 0; font-size: 14px; color: #666; }
        .survey-stats { display: flex; gap: 15px; margin: 10px 0; }
        .stat { background: #f5f5f5; padding: 8px; border-radius: 4px; text-align: center; flex: 1; }
        .stat-value { font-weight: bold; font-size: 18px; }
        .stat-label { font-size: 12px; color: #666; }
        .survey-actions { display: flex; gap: 10px; margin-top: 10px; }
        .btn { padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: #1976d2; color: white; }
        .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .btn-success { background-color: #388e3c; color: white; }
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
        .modal-content { background-color: white; margin: 10% auto; padding: 20px; width: 60%; border-radius: 8px; max-height: 80vh; overflow-y: auto; }
        .modal-header { display: flex; justify-content: space-between; margin-bottom: 15px; }
        .modal-title { font-size: 18px; font-weight: bold; }
        .close { cursor: pointer; font-size: 20px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
        .question { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 4px; }
        .question-type { margin-bottom: 10px; }
        .options-list { margin-top: 10px; }
        .option-item { display: flex; gap: 10px; margin-bottom: 8px; }
        .add-question-btn { margin-top: 15px; }
        .satisfaction-metric { display: flex; align-items: center; margin: 10px 0; }
        .satisfaction-label { min-width: 100px; }
        .satisfaction-bar { flex: 1; height: 20px; background-color: #f5f5f5; border-radius: 10px; overflow: hidden; }
        .satisfaction-value { height: 100%; background-color: #1976d2; }
        .response-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .response-table th, .response-table td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }
        .response-table th { background-color: #f5f5f5; }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <div class="header">
                <h1>客户满意度调查</h1>
                <button class="btn btn-primary" onclick="openModal('createSurveyModal')">创建调查</button>
            </div>
            
            <div class="filters">
                <div class="search-bar">
                    <input type="text" placeholder="搜索调查...">
                </div>
                <div class="filter">
                    <select id="statusFilter">
                        <option value="">所有状态</option>
                        <option value="active">进行中</option>
                        <option value="draft">草稿</option>
                        <option value="completed">已完成</option>
                    </select>
                </div>
                <div class="filter">
                    <select id="typeFilter">
                        <option value="">所有类型</option>
                        <option value="csat">客户满意度</option>
                        <option value="nps">净推荐值</option>
                        <option value="custom">自定义</option>
                    </select>
                </div>
            </div>
            
            <div class="surveys-list">
                <!-- 调查示例 -->
                <div class="survey">
                    <div class="survey-header">
                        <div class="survey-title">购买后满意度</div>
                        <div class="status-badge status-active">进行中</div>
                    </div>
                    <div class="survey-meta">
                        <div>创建于: 2023年5月15日</div>
                        <div>类型: 客户满意度</div>
                    </div>
                    <div class="survey-stats">
                        <div class="stat">
                            <div class="stat-value">124</div>
                            <div class="stat-label">回复数</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">4.2/5</div>
                            <div class="stat-label">平均评分</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">85%</div>
                            <div class="stat-label">完成率</div>
                        </div>
                    </div>
                    <div class="survey-actions">
                        <button class="btn btn-primary" onclick="openModal('viewResultsModal')">查看结果</button>
                        <button class="btn btn-secondary" onclick="openModal('editSurveyModal')">编辑</button>
                        <button class="btn btn-secondary" onclick="toggleSurveyStatus(1)">停用</button>
                    </div>
                </div>
                
                <div class="survey">
                    <div class="survey-header">
                        <div class="survey-title">产品反馈</div>
                        <div class="status-badge status-draft">草稿</div>
                    </div>
                    <div class="survey-meta">
                        <div>创建于: 2023年5月10日</div>
                        <div>类型: 自定义</div>
                    </div>
                    <div class="survey-stats">
                        <div class="stat">
                            <div class="stat-value">0</div>
                            <div class="stat-label">回复数</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">-</div>
                            <div class="stat-label">平均评分</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">-</div>
                            <div class="stat-label">完成率</div>
                        </div>
                    </div>
                    <div class="survey-actions">
                        <button class="btn btn-primary" onclick="openModal('editSurveyModal')">编辑</button>
                        <button class="btn btn-success" onclick="activateSurvey(2)">激活</button>
                        <button class="btn btn-secondary" onclick="deleteSurvey(2)">删除</button>
                    </div>
                </div>
                
                <div class="survey">
                    <div class="survey-header">
                        <div class="survey-title">第一季度净推荐值</div>
                        <div class="status-badge status-completed">已完成</div>
                    </div>
                    <div class="survey-meta">
                        <div>创建于: 2023年3月1日</div>
                        <div>完成于: 2023年3月31日</div>
                        <div>类型: 净推荐值</div>
                    </div>
                    <div class="survey-stats">
                        <div class="stat">
                            <div class="stat-value">237</div>
                            <div class="stat-label">回复数</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">42</div>
                            <div class="stat-label">NPS分数</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">91%</div>
                            <div class="stat-label">完成率</div>
                        </div>
                    </div>
                    <div class="survey-actions">
                        <button class="btn btn-primary" onclick="openModal('viewResultsModal')">查看结果</button>
                        <button class="btn btn-secondary" onclick="openModal('duplicateSurveyModal')">复制</button>
                        <button class="btn btn-secondary" onclick="archiveSurvey(3)">归档</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 创建调查模态框 -->
        <div id="createSurveyModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">创建新调查</div>
                    <span class="close" onclick="closeModal('createSurveyModal')">&times;</span>
                </div>
                <form id="createSurveyForm">
                    <div class="form-group">
                        <label for="surveyTitle">调查标题</label>
                        <input type="text" id="surveyTitle" required>
                    </div>
                    <div class="form-group">
                        <label for="surveyType">调查类型</label>
                        <select id="surveyType" required>
                            <option value="">选择类型</option>
                            <option value="csat">客户满意度 (CSAT)</option>
                            <option value="nps">净推荐值 (NPS)</option>
                            <option value="custom">自定义调查</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="surveyDescription">描述</label>
                        <textarea id="surveyDescription" rows="3"></textarea>
                    </div>
                    
                    <h3>调查问题</h3>
                    <div id="questionsContainer">
                        <div class="question">
                            <div class="form-group">
                                <label>问题文本</label>
                                <input type="text" placeholder="输入您的问题">
                            </div>
                            <div class="form-group question-type">
                                <label>问题类型</label>
                                <select>
                                    <option value="rating">评分 (1-5)</option>
                                    <option value="multiple-choice">多选</option>
                                    <option value="text">文本回复</option>
                                </select>
                            </div>
                            <div class="options-list">
                                <div class="option-item">
                                    <input type="text" placeholder="选项 1">
                                    <button type="button" class="btn btn-secondary">删除</button>
                                </div>
                                <div class="option-item">
                                    <input type="text" placeholder="选项 2">
                                    <button type="button" class="btn btn-secondary">删除</button>
                                </div>
                                <button type="button" class="btn btn-secondary">+ 添加选项</button>
                            </div>
                            <div style="text-align: right; margin-top: 10px;">
                                <button type="button" class="btn btn-secondary">删除问题</button>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" class="btn btn-secondary add-question-btn" id="addQuestionBtn">+ 添加问题</button>
                    
                    <div class="form-group">
                        <label for="targetCustomers">目标客户</label>
                        <select id="targetCustomers">
                            <option value="all">所有客户</option>
                            <option value="recent">最近购买 (30天内)</option>
                            <option value="active">活跃客户</option>
                            <option value="custom">自定义选择</option>
                        </select>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="closeModal('createSurveyModal')">取消</button>
                        <button type="submit" class="btn btn-primary">创建调查</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 查看结果模态框 -->
        <div id="viewResultsModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">调查结果：购买后满意度</div>
                    <span class="close" onclick="closeModal('viewResultsModal')">&times;</span>
                </div>
                
                <div>
                    <h3>调查摘要</h3>
                    <div class="survey-stats">
                        <div class="stat">
                            <div class="stat-value">124</div>
                            <div class="stat-label">总回复数</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">4.2/5</div>
                            <div class="stat-label">平均评分</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">85%</div>
                            <div class="stat-label">完成率</div>
                        </div>
                    </div>
                    
                    <h3>满意度指标</h3>
                    <div class="satisfaction-metric">
                        <div class="satisfaction-label">非常满意</div>
                        <div class="satisfaction-bar">
                            <div class="satisfaction-value" style="width: 45%"></div>
                        </div>
                        <div style="margin-left: 10px;">45%</div>
                    </div>
                    
                    <div class="satisfaction-metric">
                        <div class="satisfaction-label">满意</div>
                        <div class="satisfaction-bar">
                            <div class="satisfaction-value" style="width: 35%"></div>
                        </div>
                        <div style="margin-left: 10px;">35%</div>
                    </div>
                    
                    <div class="satisfaction-metric">
                        <div class="satisfaction-label">一般</div>
                        <div class="satisfaction-bar">
                            <div class="satisfaction-value" style="width: 15%"></div>
                        </div>
                        <div style="margin-left: 10px;">15%</div>
                    </div>
                    
                    <div class="satisfaction-metric">
                        <div class="satisfaction-label">不满意</div>
                        <div class="satisfaction-bar">
                            <div class="satisfaction-value" style="width: 3%"></div>
                        </div>
                        <div style="margin-left: 10px;">3%</div>
                    </div>
                    
                    <div class="satisfaction-metric">
                        <div class="satisfaction-label">非常不满意</div>
                        <div class="satisfaction-bar">
                            <div class="satisfaction-value" style="width: 2%"></div>
                        </div>
                        <div style="margin-left: 10px;">2%</div>
                    </div>
                    
                    <h3>最近回复</h3>
                    <table class="response-table">
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>客户</th>
                                <th>评分</th>
                                <th>评论</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2023年5月20日</td>
                                <td>上海科技有限公司</td>
                                <td>5/5</td>
                                <td>对产品质量非常满意。</td>
                            </tr>
                            <tr>
                                <td>2023年5月19日</td>
                                <td>北京数据科技有限公司</td>
                                <td>4/5</td>
                                <td>总体体验良好，但配送略有延迟。</td>
                            </tr>
                            <tr>
                                <td>2023年5月18日</td>
                                <td>广州贸易有限公司</td>
                                <td>3/5</td>
                                <td>产品符合预期，但还有改进空间。</td>
                            </tr>
                            <tr>
                                <td>2023年5月17日</td>
                                <td>深圳科技公司</td>
                                <td>5/5</td>
                                <td>超出预期，会再次购买！</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal('viewResultsModal')">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="exportResults()">导出结果</button>
                </div>
            </div>
        </div>
        
        <!-- 编辑调查模态框 -->
        <div id="editSurveyModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">编辑调查</div>
                    <span class="close" onclick="closeModal('editSurveyModal')">&times;</span>
                </div>
                <form id="editSurveyForm">
                    <div class="form-group">
                        <label for="editSurveyTitle">调查标题</label>
                        <input type="text" id="editSurveyTitle" value="购买后满意度" required>
                    </div>
                    <div class="form-group">
                        <label for="editSurveyType">调查类型</label>
                        <select id="editSurveyType" required>
                            <option value="csat" selected>客户满意度 (CSAT)</option>
                            <option value="nps">净推荐值 (NPS)</option>
                            <option value="custom">自定义调查</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editSurveyDescription">描述</label>
                        <textarea id="editSurveyDescription" rows="3">向客户发送的购买后满意度调查，收集关于其体验的反馈。</textarea>
                    </div>
                    
                    <h3>调查问题</h3>
                    <!-- 与创建调查表单问题部分相似的结构 -->
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="closeModal('editSurveyModal')">取消</button>
                        <button type="submit" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            // 模态框处理
            function openModal(modalId) {
                document.getElementById(modalId).style.display = 'block';
            }
            
            function closeModal(modalId) {
                document.getElementById(modalId).style.display = 'none';
            }
            
            // 调查操作
            function toggleSurveyStatus(id) {
                console.log('切换调查状态:', id);
                // 实现状态切换逻辑
            }
            
            function activateSurvey(id) {
                console.log('激活调查:', id);
                // 实现激活逻辑
            }
            
            function deleteSurvey(id) {
                if (confirm('确定要删除此调查吗？')) {
                    console.log('删除调查:', id);
                    // 实现删除逻辑
                }
            }
            
            function archiveSurvey(id) {
                console.log('归档调查:', id);
                // 实现归档逻辑
            }
            
            function exportResults() {
                console.log('导出调查结果...');
                // 实现导出逻辑
            }
            
            // 表单提交
            document.getElementById('createSurveyForm').addEventListener('submit', function(e) {
                e.preventDefault();
                // 处理调查创建
                closeModal('createSurveyModal');
            });
            
            document.getElementById('editSurveyForm').addEventListener('submit', function(e) {
                e.preventDefault();
                // 处理调查更新
                closeModal('editSurveyModal');
            });
            
            // 添加问题按钮
            document.getElementById('addQuestionBtn').addEventListener('click', function() {
                console.log('添加新问题');
                // 实现添加问题逻辑
            });
            
            // 过滤器处理
            document.getElementById('statusFilter').addEventListener('change', filterSurveys);
            document.getElementById('typeFilter').addEventListener('change', filterSurveys);
            
            function filterSurveys() {
                // 实现过滤逻辑
                console.log('过滤调查...');
            }
        </script>
    </th:block>
</body>
</html> 